<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row type="flex" justify="start">
          <span v-for="btn in btns" :key="btn.name" @click="selected(btn.value)" style="margin-right: 60px" :class="{'active': btn.value == activeName}" class="mouseOn">
            {{ btn.name }}
          </span>
        </a-row>
        <a-row type="flex" justify="start" style="margin: 20px 0">
          <a-col :span="4" style="margin-right: 10px">
            <a-input v-model="pagination.keyword" placeholder="输入关键字" allow-clear></a-input>
          </a-col>
          <a-col :span="4">
            <a-config-provider :auto-insert-space-in-button="false">
              <a-button type="primary" @click="toSearch">
                查找
              </a-button>
            </a-config-provider>
          </a-col>
        </a-row>
      </div>
      <a-table :scroll="{ x: 1500}" :columns="columns" :data-source="info" bordered :pagination="pagination"  :rowKey="(record) => record.id">
        <span slot="action" slot-scope="text, record">
          <a @click="SeeEdit(record.id,false,record.entName)" v-if="record.auditStatus == 1"> 审核</a>
          <a @click="SeeEdit(record.id,true,record.entName)" v-if="record.auditStatus == 2"> 查看</a>
          <a @click="SeeEdit(record.id,true,record.entName)" v-if="record.auditStatus == 3"> 查看</a>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getMyPageList } from '@/api/Merchants'
export default {
  data() {
    return {
      activeName: '',
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        keyword: '',
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      columns: [
        {
          title: '编号',
          dataIndex: 'merchantsNo',
          align: 'center',
        },
        {
          title: '标题',
          dataIndex: 'title',
          // align: 'center',
        },
        {
          title: '企业名称',
          dataIndex: 'entName',
          // align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'auditStatus',
          align: 'center',
          customRender: function (text) {
            if (text == 1) {
              return '审核中'
            } else if (text == 2) {
              return '已通过'
            } else if (text == 3) {
              return '未通过'
            }
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width:100,
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      info: [],
      btns: [
        { name: '全部', value: '' },
        { name: '审核中', value: 1 },
        { name: '已通过', value: 2 },
        { name: '未通过', value: 3 },
      ],
    }
  },
  created() {
    this.getMyPageList()
  },
  methods: {
    SeeEdit(id, type,title) {
      this.$router.push({ path: '/infoVerify/CooperationContent', query: { id: id, type: type,enttitle:title } })
    },
    // 分页搜索
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.getMyPageList()
    },
    // 页容量改变
    onSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.current = current
      this.getMyPageList()
    },
    getMyPageList() {
      let _params = {
        size: this.pagination.pageSize,
        current: this.pagination.current,
        keyword: this.pagination.keyword,
        auditStatus: this.activeName,
        type: 1,
      }
      getMyPageList(_params)
        .then((res) => {
          if (res.code == 200) {
            this.info = res.data.records
            this.pagination.total = res.data.total
          }
        })
        .catch((error) => {})
    },
    pageChange(pageNumber) {
      console.log('Page: ', pageNumber)
    },
    toSearch() {
      this.pagination.current =1
        this.getMyPageList()
    },
    selected(name) {
      this.pagination.current = 1
      this.activeName = name;
      this.getMyPageList()
    },
    toContent() {
      this.$router.push({ name: 'CooperationContentInfo' })
    },
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      }
    },
  },
}
</script>

<style lang="less" scoped>
.active {
  color: #1890ff !important;
}
.mouseOn:hover {
  cursor: pointer;
  color: #1890ff !important;
}
</style>
